{% extends "base.html" %}
{% block title %}kafka查询{% endblock %}
{% block head %}
    <script type="text/javascript" src="static/js/socket.io.min.js"></script>
{% endblock %}
{% block contentheader %}Kafka查询{% endblock %}
{% block contentsmallheader %}实时Kafka消息流{% endblock %}
{% block content %}
    <div id="collapseThree" class="box box-primary ng-scope">
        <div class="box-header with-border">
            <div class="row">
                <div class="col-md-2">
                    <input type="text" placeholder="Kafka topic name" style="height:34px;width:200px" id="topicname">
                </div>
                <div class="col-md-2">
                    <input type="text" placeholder="filter string" style="height:34px;width:200px" id="filter">
                </div>
                <div class="col-md-2">
                    <label>
                        <input type="checkbox" id="frombegin"> 从kafka中最早的数据开始
                    </label>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary" id="kafkabegin">开始监听</button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary" id="kafkaclose">
                        &nbsp;关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭&nbsp;</button>
                </div>
            </div>
        </div>
        <div class="box-body">
            <div class="row" id="kafkapanel">
                <div class="col-md-3" id="currenttopicname">
                    <b>当前监听的Topic：11111111111111111111111</b>
                </div>
                <br/><br/>
                <div class="col-md-2"
                     style="color:whitesmoke;overflow:auto;width:98%;height:650px;background-color: #0c0c0c;margin:0px 10px 0px 10px"
                     id="kafkalog">
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block script %}

    <script type="text/javascript">
        function add_class() {
            $('#treeview3').addClass('active');
            $('#menu3').addClass('menu-open');
            $('#datasquerykafka').addClass('active');
        }
        $('#kafkapanel').hide();
        namespace = '/data_query_kafka';
        var socket_test;
        var room;
        $('#kafkabegin').on('click', function () {
            if ($("#topicname").val() != "") {
                $('#kafkabegin').text("正在监听");
                $('#kafkabegin').attr('disabled', 'true');
                $('#currenttopicname').empty();
                $('#currenttopicname').append("当前监听的Topic(限5分钟监听)：<b>" + $("#topicname").val() + "</b>");
                $('#kafkapanel').show();
                room = $("#currentname").text() + new Date().getTime();
                socket_test = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace, {'forceNew': true});
                socket_test.emit('my_event', {
                    info: 'connect to topic:',
                    data: $("#topicname").val(),
                    room: room,
                    filterstring: $("#filter").val(),
                    frombegin: $("#frombegin").prop("checked")
                });
                socket_test.on('my_response', function (msg) {
                    $('#kafkalog').append('<br>' + msg.data);
                    $('#kafkalog').scrollTop(Number.MAX_VALUE);

                });
                setTimeout(function () {
                    socket_test.emit('disconnect_request', {room: room});
                    $('#kafkabegin').text("开始监听");
                    $('#kafkabegin').removeAttr('disabled');
                }, 300000)
            }
        });
        $('#kafkaclose').on('click', function () {
            socket_test.emit('disconnect_request', {room: room});
            $('#kafkabegin').text("开始监听");
            $('#kafkabegin').removeAttr('disabled');
        });

    </script>
{% endblock %}